<%@page contentType="text/html" pageEncoding="UTF-8"%>
        <link rel="stylesheet" type="text/css" media="all" href="<%=request.getContextPath()%>/css/jquery.css" />
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="<%=request.getContextPath()%>/js/strftime.js"></script>
        <script type="text/javascript">
			$(function(){
				function showOnly(year, month, date) {
					$(".events li").each(function(i,e){
						if (! ($.trim($(e).children(".date").text()).substr(0,7) == year + "-" + (month < 10 ? "0"+month : month))) {
							//$(e).addClass("hover");
							$(e).removeClass("hover");
							$(e).addClass("hidden");
						} else {
							//$(e).removeClass("hidden");
							$(e).addClass("hover");
						}
						if (($.trim($(e).children(".date").text()).substr(0,10) == year + "-" + (month < 10 ? "0"+month : month) + "-" + date)) {
							$(e).removeClass("hover");
							$(e).addClass("hover");}
						});
				}
			
				$(".calendar-placeholder")
					.datepicker({
						beforeShowDay: function(date) {
							var edgeEvent = $(".events li").children((":contains('" + strftime("%Y-%m-%d",date)) + "')").parent();
							if(edgeEvent.length > 0) {
								var title = $.trim(edgeEvent.text().replace(/(\s)+/g, ' '));//remove extra spaces.
								return [true,"edge-event",title];
							}
							else {
								return [false];
							}
						},
						onChangeMonthYear: function(year, month, inst) {
							showOnly(year,month)
						}
					})
					.addClass("calendar");
				
				//when user mouseover a events in the list, hightlight the correspondent date in calendar
				$(".events li")
					.mouseenter(function(evt){
						var date = $(evt.currentTarget).children(".date").text();
						$(".calendar td[title]")
							.children("a")
							.removeClass("ui-state-hover")
							.end()
						.filter("td[title^="+date+"]")
							.children("a")
							.addClass("ui-state-hover");
						
						$(".events li").addClass("hover");
						//$(evt.currentTarget).addClass("hover");
					});
				$(".events")
					.mouseleave(function(evt){
						//$(".calendar td[title] a")
							//.removeClass("ui-state-hover");
							
						//$(".events li").removeClass("hover");
					});
				
				//when user mouse over a date in calendar, hightlight the correspondent events in the list
				$(".calendar td[title] a")
					.live("mouseenter",function(evt){
						$(".events li").removeClass("hover");
						$(".events li:contains('"+$(evt.currentTarget).parent().attr("title").substr(0,10)+"')")
							.addClass("hover");
					})
					.live("mouseleave",function(evt){
						//$(".events li:contains('"+$(evt.currentTarget).parent().attr("title").substr(0,10)+"')")
						//	.removeClass("hover");
						var today = new Date();
						showOnly(today.getFullYear(),today.getMonth()+1, today.getDate());
					});
				
				var today = new Date();
				showOnly(today.getFullYear(),today.getMonth()+1, today.getDate());
			});
        	
        </script>
        <style type="text/css">
			.event-calendar {
				/*padding:10px 15px;*/
				margin: 0 2px 20px 2px;
				
				/*background-image:url(../image/side-bar-bg.jpg);
				background-position:100% 0;
				background-repeat:no-repeat;
				background-color:#f8f8f8;*/
				
				behavior: url(css/PIE.htc);
				
				 /*-moz-box-shadow: 0px 3px 4px #ddd;*/ /* FF3.5+ */
			  /*-webkit-box-shadow: 0px 3px 4px #ddd;*/ /* Saf3.0+, Chrome */
					  /*box-shadow: 0px 3px 4px #ddd;*/ /* Opera 10.5, IE 9.0 */
			}
		
			.calendar {
				margin-bottom:6px;
				position:relative;
			}
			
			.calendar *{
				font-size:10px;
			}
			
			.ui-datepicker {
				width: 200px;
			}
			
			.calendar .edge-event *{
				background-color:#666;
				background-image:none;
				cursor:default;
				border-color:#666;
				color:#fff;
			}
			
			.calendar .edge-event .ui-state-hover{
				background-color:#53aecb;
				color:#fff;
				border-color:#53aecb;
				background-image:none;
			}
			
			.events{
				list-style:none;
			}
			
			.events li {
				display:none;
				margin: 0 0 0.2em 0;
				border:1px #f8f8f8 solid;
			}
			
			
			.events *{
				/* color:#53aecb; */
			}
			
			
			.events .date {
				display:inline;
				font-size:13px;
				font-weight:bold;
				color:#CC0000;
			}
			
			.events .title {
				display:block;
				font-size:0.8em;
				line-height:12px;
			}
			
			.events a, .events a *{
				text-decoration:none;
			}
			
			.events a:hover, .events a:hover *{
				text-decoration:underline;
			}
			
			/*.events li:hover, .events li.hover, {
				background-color:#53aecb;
				border:1px #666 solid;
				padding-left:2px;
				
				
			}
			*/
			.events li.hover, .events li:hover {
				color:#53aecb;
				display:block;
			}
			
			.events li.hidden {
				display:none;
			}
			
			
			
			
        </style>
        <!--[if lte IE 6]>
        <style type="text/css">			
			.events .date {
				display:block;
			}
			
			.events .title {
				display:inline;
			}
        </style>
        <![endif]-->

    <div class="event-calendar">
        <div class="heading"><h2></h2></div>
        <div class="calendar-placeholder"></div>
        <ul class="events">
        	<!--
            	Feel free to add/remove li.
                Keep in mind the order here will be the order of final display.
            -->
            <li>
                <span class="date">2011-04-04</span>
                <a href="workshop/seminarseries/2010-11/seminar12.htm" target="_blank">
                    <span class="title">TEST</span>
                </a>
            </li>

        </ul>
    </div>
